<template>
	<view>
		<view class="container">
			<u-navbar>
				<view class="u-nav-slot" slot="left" @click="clicktoaddr">
					<view class="addr">
						{{addrname}}
					</view>
					<image class="addr_icon" src="/static/img/home/xia.png" mode=""></image>
				</view>
			</u-navbar>
			<view class="top" :style="{paddingTop:paddingTop+'px'}">
				<view class="header">
					<view class="header_center">
						<u-search placeholder="搜索你需要购买的商品" :disabled="true"
							@click='clickto("/pages/searchpage/searchpage")' height='73rpx' margin='0 19rpx 0 9rpx'
							:showAction='false' v-model="keyword"></u-search>
					</view>
					<view class="header_right">
						<image class="scan_icon" @click="clickscan" src="/static/img/home/scan.png" mode=""></image>
					</view>
				</view>
				<view class="">
					<u-tabs @click="tabsChange" itemStyle='height:80rpx;' :list="list1"
						lineHeight='12rpx' lineWidth='32rpx' lineColor='#FF7428'
						activeStyle="color:#232323;font-size:41.67rpx;font-weight: bold;"
						inactiveStyle="color:#707070;fontSize:31.95rpx"></u-tabs>
				</view>
			</view>

			<scroll-view scroll-y="true" class="scroll-view">
				<view>
					<view class="fw">
						<view class="fw_item" @click="clickto('/pages/tongcheng/tongcheng?lat='+location.latitude+'&lng='+location.longitude)">
							<view class="fw_name">
								附近商家
							</view>
							<view class="fw_ms">
								同城商家送货超快
							</view>
						</view>
						<view class="fw_item item1" @click="clickto('/pages/duihuan/duihuan')">
							<view class="fw_name">
								易货商城
							</view>
							<view class="fw_ms">
								积分免费兑换商品
							</view>
						</view>
					</view>
					<view class="notice">
						<image class="notice_icon" src="/static/img/home/notice.png" mode=""></image>
						<u-notice-bar :text="text1" direction='column' mode='link' icon=' ' bgColor='#fff'
							color='#707070' fontSize='26rpx'></u-notice-bar>
					</view>
					<view class="content">
						<proitem v-for="(item,index) in prolist" :key="index" :pro="item"></proitem>
					</view>
				</view>
			</scroll-view>


		</view>
	</view>
</template>

<script>
	// #ifdef MP
	const citySelector = requirePlugin('citySelector');
	const QQMapWX = require('../../common/qqmap-wx-jssdk.js');
	// #endif
	import {
		homeData
	} from '@/api/home.js'
	import {
		getProductByCateGory
	} from '@/api/product.js'
	export default {
		data() {
			return {
				keyword: '',
				list1: [],
				paddingTop: 0,
				text1: ['品牌直营，平台担保，100%正品', '品牌直营，平台担保，100%正品'],
				prolist: [],
				addrname: '定位中',
				location:{}
			};
		},
		onLoad() {

		},
		onReady() {
			const {
				statusBarHeight,
				windowHeight,
				screenHeight
			} = uni.getSystemInfoSync()

			uni.setStorageSync('statusBarHeight', statusBarHeight)
			this.paddingTop = 44 + uni.getStorageSync('statusBarHeight')
			// console.log(uni.getStorageSync('statusBarHeight'))
		},
		onShow() {
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
				}
			});
			this.getProductCategory(1)
			// #ifdef MP
			const qqmapsdk = new QQMapWX({
				// key: 'IPXBZ-BJDEW-O4JRO-RUQEL-JXB6S-QSBZJ',
				key: 'NTXBZ-RWELX-FCJ4Q-7BQT4-SG5MH-EMFV4',
			});
			qqmapsdk.reverseGeocoder({
				location: '',
				success: function(res) {
					// console.log(res);
					this.addrname = res.result.address_component.city
				},
				fail: function(res) {
					console.log(res);
				},
				complete: function(res) {
					console.log(res);
				}
			});
			const selectedCity = citySelector.getCity(); // 选择城市后返回城市信息对象，若未选择返回null
			console.log(selectedCity)
			if (selectedCity) {
				this.addrname = selectedCity.name
				this.location=selectedCity.location
			}
			
			// #endif

		},
		onUnload() {
			// #ifdef MP
			citySelector.clearCity();
			// #endif
			// 页面卸载时清空插件数据，防止再次进入页面，getCity返回的是上次的结果
		},
		mounted() {
			this.getCreateData();
			
		},
		methods: {
			async getCreateData() {
				const res = await homeData({
					page: '1',
					keyword: '',
					lat: "104.06794488430025",
					lng: "30.631890827093013",
					category_id: 1
				})
				this.list1.push(...res.data.data.category)
			},
			async getProductCategory(id) {
				const res = await getProductByCateGory({
					category_id: id,
					type:1
				})
				this.prolist = res.data.data
				this.prolist.map(t => {
					t.img = this.$BASE_URL + t.images.split(',')[0]
				})
			},
			// 首页分类导航
			tabsChange(item) {
				if (this.listKey == item.id) return false;
				this.getProductCategory(item.id)
				this.listKey = item.id;
			},
			clicktoaddr() {
				const key = 'NTXBZ-RWELX-FCJ4Q-7BQT4-SG5MH-EMFV4';
				// const key = 'IPXBZ-BJDEW-O4JRO-RUQEL-JXB6S-QSBZJ'; // 使用在腾讯位置服务申请的key
				const referer = '烩生活shop'; // 调用插件的app的名称
				const hotCitys = '成都'; // 用户自定义的的热门城市
				wx.navigateTo({
					url: `plugin://citySelector/index?key=${key}&referer=${referer}&hotCitys=${hotCitys}`,
				})
			},
			clickto(url) {
				uni.navigateTo({
					url
				})
			},
			// 扫码
			clickscan() {
				uni.scanCode({
					success: function(res) {
						// console.log('条码类型：' + res.scanType);
						// console.log('条码内容：' + res.result);
						uni.navigateTo({
							url:res.result
						})
					}
				});
			}
		}

	}
</script>

<style lang="less">
	.container {
		padding: 0;
		position: relative;

		.top {
			// position: absolute;
			// padding-top: calc(44px + var(--status-bar-height));
		}

		.header {
			padding: 0 28rpx;
			width: 694rpx;
			display: flex;
			align-items: center;

			.header_left {
				display: flex;
				align-items: center;
				color: #333333;
				font-size: 30rpx;

				font-weight: bold;

				.addr_icon {
					width: 21rpx;
					height: 14rpx;
					margin-left: 3rpx;
				}
			}

			.header_right {
				width: 40rpx;
				height: 40rpx;
			}

			.scan_icon {
				width: 40rpx;
				height: 40rpx;
			}

			.header_center {
				flex: 1;
			}
		}
	}

	.fw {
		display: flex;
		padding: 22rpx 30rpx 7rpx;
		justify-content: space-between;

		.fw_item {
			width: 332rpx;
			height: 140.8rpx;
			background-image: url('/static/img/home/fujin.png');
			background-size: 100%;

			.fw_name {
				font-size: 35rpx;
				color: #232323;
				font-weight: bold;
				margin-left: 26rpx;
				margin-top: 33rpx;
			}

			.fw_ms {
				color: #707070;
				font-size: 22rpx;
				margin-left: 24rpx;
				margin-top: 4rpx;
			}
		}

		.item1 {
			background-image: url('/static/img/home/duihuan.png');
		}
	}

	.notice {
		display: flex;
		align-items: center;
		padding: 19rpx 37rpx 22rpx 32rpx;

		.notice_icon {
			width: 83rpx;
			height: 44rpx;
		}
	}

	.content {
		background-color: #F7F7F9;
		padding: 26rpx 20rpx 126rpx;
		/* #ifdef MP */
		padding: 26rpx 20rpx 0;
		/* #endif */
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.u-nav-slot {
		display: flex;
		align-items: center;
		color: #333333;
		font-size: 30rpx;

		font-weight: bold;

		.addr_icon {
			width: 21rpx;
			height: 14rpx;
			margin-left: 3rpx;
		}
	}

	.scroll-view {
		height: calc(100vh - 44px - var(--status-bar-height) - 77rpx - 80rpx - 42rpx);
	}
</style>
